<template>
    <div class="message-box">
        <div class="message-box-content">
            <div class="message-box-content-body">
                <pre>{{message}}</pre>
            </div>
            <div class="message-box-content-footer">
                <button class="btn btn-primary" @click="ok" v-if="mode == 'alert' || mode == 'confirm'">确定</button>
                <button class="btn btn-primary" @click="cancel" v-if="mode == 'confirm'">取消</button>
                <template v-if="mode == 'customize'">
                    <button class="btn btn-primary" v-for="item in customize" :key="item.command" @click="clickButton(item.command)" >{{item.text}}</button>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
    export default {    
        name: 'message-box',
        props: {
            message: {
                type: String,
                default: ''
            },
            mode: {
                type: String,
                default: 'alert'
            },
            customize: {
                type: Object
            }
        },
        methods: {
            ok(){

            },
            cancel(){

            },
            clickButton(command){

            }
        }
    }
</script>
<style lang="scss" scoped>
    .message-box {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.1);
        z-index: 1000;
        backdrop-filter: blur(5px);
        .message-box-content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: fit-content;
            min-width: 50vmin;
            background: #fff;
            border-radius: 5px;
            padding: 2vmin;
            .message-box-content-body {
                padding: 2vmin;
            }
        }
        .message-box-content-footer{
            margin-top: 2vmin;
            display: flex;
            justify-content: flex-end;
        }
        pre{
            max-width: 50vw;
            white-space: break-spaces;
        }
    }
</style>
